<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style>
          .dot{
              display: inline-block;
              width: 5px;
              height: 5px;
              background-color: #FF0000;
              vertical-align: middle;
          }
          .content{
              font-size: 14px;
              margin-left: 5px;
          }
          .item{
              width: 220px;
              height: 20px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
          }
        </style>
    </head>
    <body>
        <div id="container">
            <news title="你吃了吗?"></news>
        </div>
       
        <script>
           var news={
               props:["title"],
               template:
               `
                <div class="item">
                    <span class="dot"></span>
                    <span class="content">{{title}}</span>
                </div>
               `
           }; 
           new Vue({
               el:"#container",
               data:{
                   newslist:[
                       "码上守护 阻断疫情传播  让农民安心去种地  金观平",
                       '中国人奋斗坐标  内蒙古新型农牧民成“绿领”',
                       '上海金山区方舱医院首批173位患者出院 奋进新征程'
                   ]
               },
               components:{
                  news  //es6新增的 当key与value名称一样是，可以只写一个  ===> "news":news
               }
           });
        </script>
    </body>
</html>
